<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>玩家注册</title>

    <link rel="stylesheet" href="./css/common1.css">
    <link rel="stylesheet" href="./css/pop.css">
</head>

<body>
    <div class="login-container">
        <h2 class="login-title">注册</h2>
        <form id="loginForm">
            <div class="form-item">
                <div class="input-group">
                    <span class="input-prefix">👤</span>
                    <input type="text" class="input-field" placeholder="输入用户名" id="username">
                    <span class="input-clear" id="clearUsername">×</span>
                </div>
            </div>
            <div class="form-item">
                <div class="input-group">
                    <span class="input-prefix">🔓</span>
                    <input type="password" class="input-field" placeholder="输入密码" id="password">

                </div>
            </div>
            <div class="form-item">
                <div class="input-group">
                    <span class="input-prefix">🔒</span>
                    <input type="text" class="input-field" placeholder="确认密码" id="surepassword">

                </div>
            </div>
            <button type="button" class="el-button--primary" id="submit">提交</button>
        </form>
        <div class="login-footer">
            <span style="margin-left: 10px;">账号密码建议简单好记,比如&nbsp;&nbsp;名字缩写+123456</span>
            <br>
            <span style="margin-left: 10px;">登录注册不涉及和泄露个人信息,放心填写</span>
        </div>
        <!-- 消息容器 -->
        <div class="toast-container"></div>
    </div>

    <div class="message" id="message"></div>
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/common1.js"></script>
    <script src="./js/pop.js"></script>
    <script>

        let usernameInput = document.querySelector('#username');
        let passwordInput = document.querySelector('#password');
        let surepasswordInput = document.querySelector('#surepassword');
        let submitButton = document.querySelector('#submit');
        submitButton.onclick = function () {
            if (!usernameInput.value.trim()) {
                window.toast = showToast('用户名不能为空', 'error');
                return;
            }

            // 检查密码是否为空（修正：用 !value 判断空字符串）
            if (!passwordInput.value || !surepasswordInput.value) {
                window.toast = showToast('密码不能为空', 'error');
                return;
            }

            if (passwordInput.value !== surepasswordInput.value) {
                window.toast = showToast('密码不一致', 'error');
                return;
            }

            $.ajax({
                type: 'post',
                url: '/register',
                data: {
                    username: usernameInput.value,
                    password: passwordInput.value,
                },
                success: function (body) {
                    // 如果注册成功, 就会返回一个新注册好的用户对象. 
                    if (body && body.username) {
                        window.toast = showToast('注册成功 即将返回登录', 'success');
                        // 延迟重定向，确保消息能够完整显示
                        setTimeout(function () {
                            location.assign('/login.html');
                        }, 1200);
                    } else {
                        window.toast = showToast('注册失败', 'error');
                    }
                },
                error: function () {
                    window.toast = showToast('注册失败', 'error');
                }
            });
        }

    </script>

</body>

</html>